<template>
	<view class="container">
		<view class="cu-list">
			<view class="list-cell b-b line" hover-class="cell-hover" :hover-stay-time="50" @click="modalName='avatar'">
				<text class="cell-tit" >头像</text>

				<view class= "cell-tip cu-avatar lg round user-img" v-if="userInfo.id>0">
          <image :src="userInfo.mn_avatar" mode="widthFix" alt="" v-if="userInfo.mn_avatar" />
          <image :src="'/static/images/avatar'+(userInfo.id)%4+'.png'" mode="widthFix" alt="" v-else />

        </view>
				<!-- <text class="cell-more yticon icon-you"></text> -->
			</view>

			<view class="list-cell b-b line"  hover-class="cell-hover" :hover-stay-time="50" @tap="modalName='nickName'">
				<text class="cell-tit">昵称</text>
				<view class="cell-tip">
          <span v-if="userInfo.nick_name">{{userInfo.nick_name}}</span>
          <span v-else>{{names[(userInfo.id)%16]}}</span>
<!--          <open-data type="userNickName"></open-data>-->
        </view>
				<!-- <text class="cell-more yticon icon-you"></text> -->
			</view>
			<view class="list-cell line" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">手机号</text>
				<text class="cell-tip">{{userInfo.mobile}}</text>
				<!-- <text class="cell-more yticon icon-you"></text> -->
			</view>
<!--			<view class="list-cell line" hover-class="cell-hover" :hover-stay-time="50" @tap="goPage('/pages/tabbar/tabbar-4/userInfo')">-->
<!--				<text class="cell-tit">我的档案</text>-->
<!--				<text class="cell-tip cuIcon-right"></text>-->
<!--			</view>-->
<!--			<view class="list-cell line" hover-class="cell-hover" :hover-stay-time="50" v-if="userInfo.agent.mobile==undefined">-->
			<view class="list-cell line" hover-class="cell-hover" :hover-stay-time="50"  @tap="goPage('/pages/tabbar/tabbar-4/userInfo')" >
				<text class="cell-tit">完善岗位需求</text>
				<text class="cell-tip cuIcon-right"></text>
			</view>
      <view class="list-cell line" hover-class="cell-hover" :hover-stay-time="50"  >
        <text class="cell-tit">求职状态</text>
        <view class="cell-tip flex">
          <view>求职中<radio class="blue " @click="changType(userInfo.id,'T')" :class="(userInfo.user_type)=='T'?'checked':''" :checked="(userInfo.user_type)=='T'?true:false" value="T"></radio></view>
          <view class="margin-left-lg">不求职<radio class="red"  @click="changType(userInfo.id,'F')" :class="(userInfo.user_type)=='F'?'checked':''" :checked="(userInfo.user_type)=='F'?true:false" value="F"></radio></view>

        </view>
      </view>
<!--			<view class="list-cell " @click="goPage('/pages/tabbar/tabbar-4/bankInfo')">-->
<!--				<text class="cell-tit">银行卡信息</text>-->
<!--				<text class="cell-tip">查看</text>-->
<!--			</view>-->
		</view>
		<view class="cu-list">
<!--			<view class="list-cell " @tap="goPage('/pages/tabbar/tabbar-4/qrcode')">-->
<!--			<view class="list-cell line" @tap="goPage('')">-->
<!--				<text class="cell-tit">引荐码-->
<!--				</text>-->
<!--				<view class="cell-more cuIcon-right"></view>-->
<!--			</view>-->
			<view class="list-cell line" @tap="goPage('')">
          <text class="cell-tit">粉丝维护</text>
          <view class="cell-more cuIcon-right"></view>
      </view>
			<view class="list-cell line" @click="goPage('/pages/tabbar/tabbar-4/goldUsed')">
				<text class="cell-tit">引荐记录</text>
				<text class="cell-tip cuIcon-right"></text>
			</view>
<!--      <view class="list-cell line"  v-if="userInfo.agent.mobile!=undefined" @tap="goPage('/pages/tabbar/tabbar-2/needList')">-->
<!--        <text class="cell-tit">岗位需求跟踪</text>-->
<!--        <text class="cell-tip cuIcon-right"></text>-->
<!--      </view>-->
<!--      <view class="list-cell"  v-if="userInfo.agent.mobile!=undefined" @tap="goPage('/pages/tabbar/tabbar-4/goldGot')">-->
      <view class="list-cell"  v-if="$isHasRoleToAccess(['GroupAdmin','SuperAdmin'])" @tap="goPage('/pages/tabbar/tabbar-4/goldGot')">
        <text class="cell-tit">代理管理</text>
        <text class="cell-tip cuIcon-right"></text>
      </view>
		</view>


		<view class="cu-list">
<!--			<view class="list-cell line" @click="goPage('/pages/tabbar/tabbar-4/article?t=平台服务说明')">-->
<!--				<text class="cell-tit">平台服务告之</text>-->
<!--				<text class="cell-tip">查看＞</text>-->
<!--			</view>-->
			<view class="list-cell b-b" @click="goPage('/pages/tabbar/tabbar-4/article?t=用户协议')" hover-class="cell-hover"
			:hover-stay-time="50">
				<text class="cell-tit">使用使用协议</text>
				<text class="cell-tip">查看＞</text>
				<!-- <text class="cell-more yticon icon-you"></text> -->
			</view>
		</view>
		<view class="cu-list ">
			<button class="cu-btn block bg-red margin-tb-sm " @tap="toLogout()" >
				注销账号</button>

		</view>

    <view class="cu-modal" :class="modalName=='avatar'?'show':''" @tap="hideModal">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content" style="color: #FE4C4C;font-weight: 600;">头像修改</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <!-- <view v-if="!fixedAvatar" @click="chooseImg()" style="width: 80px;height: 80px;border-radius: 5px;border: 1px solid lightgray;padding: 5px;margin-left: 50%;transform: translateX(-50%);">
          <image src="@/static/iloveimg-compressed/userAvatar.png" mode="widthFix" alt="">
        </view> -->
        <view style="width: 80px;height: 80px;border-radius: 5px;border: 1px solid lightgray;padding: 5px;margin-left: 50%;transform: translateX(-50%);position: relative;display: flex;justify-content: center;align-items: center;">
          <image mode="aspectFill" style="width: 100%;height: 100%;" :src="userInfo.mn_avatar"></image>
          <button style="width: 100%;height: 100%;position: absolute;opacity: 0;" open-type="chooseAvatar" @chooseavatar="getUserAvat"></button>
        </view>
        <view class="cu-bar bg-white text-bold" style="justify-content: space-evenly;">
          <text class="text-red" @tap="hideModal">取消</text>
<!--          <view style="height: 1.5em;width: 1px;border-left: 1px solid black;" ></view>-->
<!--          <text class="text-green" @tap="confirm">确认</text>-->
        </view>
      </view>
    </view>
      <view class="cu-modal" :class="modalName=='nickName'?'show':''" >
        <view class="cu-dialog">
          <view class="cu-bar bg-white justify-end">
            <view class="content" style="color: #FE4C4C;font-weight: 600;">昵称修改</view>
            <view class="action" @tap="hideModal">
              <text class="cuIcon-close text-red"></text>
            </view>
          </view>
          <view class="padding">
            <form @submit="setNickName" >
              <input style="border-bottom: 1px solid #cbcbcb;width: 72%;margin-left: 50%;transform: translateX(-50%);" type="nickname" name="input" v-model="userInfo.nick_name" >
              <view class="cu-bar bg-white text-bold margin-top-sm" style="justify-content: space-evenly;background-color: rgb(248, 248, 248);">
                <view style="width: 50%;" class="text-red" @tap="hideModal">取消</view>
                <view style="height: 1.5em;width: 1px;border-left: 1px solid black;" ></view>
                <view style="position: relative;width: 50%;">
                  <view class="text-green">确认</view>
                  <button style="width: 100%;height: 30px;position: absolute;top: 0;opacity: 0;" class="text-green" form-type="submit" ></button>
                </view>
              </view>
            </form>
          </view>
        </view>
      </view>
	</view>
</template>

<script>
	// import {
	//     mapMutations
	// } from 'vuex';
	export default {
		data() {
			return {
			  names:['失宠的猫','淡述昔情','绝尘映雪','阳间幕宾','櫻花之戀','亦难幸福','多心病患','梅芳竹清','半杯可乐','夜店情殇','瞬间灰色','烟雾弥漫','像个少女','烟草味道','無怨無悔','甜甜微笑'],
        modalName:'',
				userInfo:{},
				uId:0,
			};
		},
		onLoad(options){
		  // console.log(this.$isHasRoleToAccess(['GroupAdmin','SuperAdmin']))
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			// this.tabCurrentIndex = +options.state;
			// // #ifndef MP
			// this.loadData()
			// // #endif
			// // #ifdef MP
			// if(options.state == 0){
			// 	this.loadData()
			// }
			// // #endif
			this.uId = uni.getStorageSync('userId');
			let obj = uni.getSystemInfoSync();
			let clientHeight = obj.screenHeight;
			this.scrollHeight = clientHeight-150+'px';
			console.log(this.scrollHeight);
			this.userInfo = uni.getStorageSync('userInfo');
			// this.getUserInfo();
		},
		methods:{
      async setNickName(e){
        let t = this
        let param = {
          id:t.uId,
          nick_name:t.userInfo.nick_name
        };

        let data = await this.$http.post(
          'wx/update_user', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        t.modalName=''
        console.log(data);
      },
      putNickName(){
        this.modalName='nickName'
      },
		  uploadImage(path){
		    let t = this
        uni.uploadFile({
          url: this.$http.fileUrl, //仅为示例，非真实的接口地址
          filePath: path,
          name: 'file',
          success: (ret) => {
            console.log(ret.data);
            var data = JSON.parse(ret.data)
            var path = data.data.url
            t.userInfo.mn_avatar = path
            console.log(path);
            t.confirm()
          }
        });
      },
      getUserAvat(e) {
        console.log(e)
        this.uploadImage(e.detail.avatarUrl)
      },
      async confirm(){
        let t = this
        let param = {
          id:t.uId,
          mn_avatar:t.userInfo.mn_avatar
        };

        let data = await this.$http.post(
          'wx/update_user', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        t.modalName=''
        console.log(data);
      },
      hideModal(){
        this.modalName = ''
      },
			// ...mapMutations(['logout']),
			//获取列表
			async getUserInfo(){
				let uId = uni.getStorageSync('userId');
				if(uId>"0"&&uId!=undefined){
					let param = {
						id:uId
						};
					let that = this;
					let data = await this.$http.post(
						'employerUserInfo', //可以直接放链接(将不启用全局定义域名)
						param,
					);
					console.log(data);
					this.userInfo = data;
					uni.setStorageSync('userInfo',data);

				}

			},
			navTo(url){
				this.$api.msg(`跳转到${url}`);
			},
			logout(){
				uni.clearStorageSync();
			},
			//退出登录
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		this.logout();
				    		setTimeout(()=>{
				    			uni.switchTab({
									url: '/pages/tabbar/tabbar-2/socialSecurity'
								});
				    		}, 200)
				    	}
				    }
				});
			},
			//switch
			switchChange(e){
				let statusTip = e.detail.value ? '打开': '关闭';
				this.$api.msg(`${statusTip}消息推送`);
			},
			//changType
      async changType(id,type){
		    this.userInfo.user_type = type
        let param = {
          id:id,
          user_type:type
        };

        let data = await this.$http.post(
          'wx/update_user', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        uni.showToast({
          title: `操作成功`,
          icon: 'none'
        })
			},
			goPage(page){
		    if(!page){
		      uni.showToast({
            title: `敬请期待...`,
            icon: 'none'
          })
        }
				uni.navigateTo({
					url: page
				})
			},
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.cu-list{
		margin: 20px 15px;
		border-radius: 10px;
		overflow: hidden;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:80upx;
		position:relative;
		background: #fff;
		height: 55px;
		justify-content: center;

		.user-img{
			height: 35px;
			width: 35px;
			overflow: hidden;
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: 32upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.promote{
			padding: 5px;
			border: 1px solid #4CA5FE;
			border-radius: 6em;
			margin-left: 10px;
			color: #4CA5FE;
			font-size: 12px !important;
		}
		.cell-tip{
			font-size: 32upx;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
	.cu-btn{
		height: 70rpx;
		width: 100%;
		/* margin: 0 10%; */
		box-shadow: 0px 3px 6px #4CA5FE;
	}
	.line{
		border-bottom: 1upx solid #cccccc;
	}
	.bottom{
		position: fixed;
		bottom: 10px;
		width: 90%;
		.cell-tit{
			color: #FFFFFF !important;
			height: 44px;
		}
	}
</style>
